<template>
  <div class="echart">
    <div class="radio">
      <el-radio-group v-model="dimension" @change="changeFn">
        <el-radio-button label="w">本周</el-radio-button>
        <el-radio-button label="e">本月</el-radio-button>
        <el-radio-button label="c">本年</el-radio-button>
      </el-radio-group>
    </div>
    <h4>入库/出库信息</h4>
    <div ref="echart" style="height:450px; weight:1632px;background-color: #fff;" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { tashInfo } from '@/api'
export default {
  data() {
    return {
      info: {},
      dimension: 'e', // 周w 日e 月c
      option: {
        legend: {
          right: '50%',
          bottom: '4%'
        },
        gradientColor: {
          0: '#000',
          1: '#090'
        },
        tooltip: {
          // 触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效，
            type: 'shadow', // 默认为line，line直线，cross十字准星，shadow阴影
            shadowStyle: {
              color: 'rgba(100,100,100,0.5)'
            }
          }
        },

        dataset: {
          source: [
          ]
        },
        xAxis: [
          { type: 'category', data: [], gridIndex: 0, axisLabel: { interval: 0 }}

        ],
        yAxis: [{ type: 'value', gridIndex: 0 }],
        series: [
          // These series are in the first grid.
          { type: 'bar', data: [], seriesLayoutBy: 'row', itemStyle: {
            color: '#ff7100'
          }},
          { type: 'bar', data: [], seriesLayoutBy: 'row', itemStyle: {
            color: '#ffb200'
          }}
        ]
      }
    }
  },
  async created() {
    this.fetchTaskInfo()
  },
  methods: {
    async fetchTaskInfo() {
      const res = await tashInfo({ dimension: this.dimension })
      // console.log(res)
      this.info = res.data
      this.echartsInit()
    },
    echartsInit() {
      const myChart = echarts.init(this.$refs.echart)
      this.option.xAxis[0].data = this.info.x
      this.option.series[0].data = this.info.data[0].data
      this.option.series[1].data = this.info.data[1].data
      this.option && myChart.setOption(this.option)
    },
    changeFn() {
      this.fetchTaskInfo()
    }
  }

}
</script>

<style lang="scss" scoped>
.echart{
  margin-top: 20px;
  padding-top: 20px;
  position: relative;
  .radio{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
  }
  h4{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 999;
  }
}
</style>
